@import 'compass/css3';

.folder {
    background-image: subtunes_image('blue-folder.png') !important;
}
.music {
    background-image: subtunes_image('music-icon.png') !important;
}
.ipod {
    background-image: subtunes_image('ipod.png') !important;
}
.x-tree-node-icon.playlist {
    background-image: subtunes_image('playlist-icon.png') !important;
}

#images-view .x-panel-body{
	background: white;
	font: 11px Arial, Helvetica, sans-serif;
}
.album-view {
    .thumb{
        background: #dddddd;
		height: 100px;
		width: 100px;
		@include box-shadow(#888, 1px, 3px, 2px);
        img{
            height: 100px;
            width: 100px;
        }
    }
    .thumb-wrap{
        float: left;
        margin: 4px;
        margin-right: 0;
        padding: 5px;
        height: 135px;
        width: 105px;
        font-family: arial, sans-serif;	
        span {
            display: block;
            overflow: hidden;
            text-align: center;
        }
        .album {
            font-size: 12px;
            font-weight: bold;
        }
        .artist {
            font-size: 12px;
        }
        .title {
            font-size: 12px;
            font-weight: bold;
        }
    }
    .x-view-over{
        border:1px solid #dddddd;
        background: #efefef url( ../../ext-3.3.1/resources/images/default/grid/row-over.gif) repeat-x left top;
        padding: 4px;
    }
    .x-view-selected{
        background: #eff5fb url( ../../ext-3.3.1/examples/view/images/selected.gif) no-repeat right bottom;
        border:1px solid #99bbe8;
        padding: 4px;
        .thumb{
            background:transparent;
        }
    }
    .loading-indicator {
        font-size:11px;
        background-image:url( ../../ext-3.3.1/resources/images/default/grid/loading.gif);
        background-repeat: no-repeat;
        background-position: left;
        padding-left:20px;
        margin:10px;
    }
}
.tracklist-grid .x-grid2-hd-inner {
	padding-top: 1px;
	padding-bottom: 1px;
	font-weight: bold;
}
.coverflow {
    background-color: black;
}
.imageflow .caption{
    color: white;
    font-family: arial, sans-serif;
}
.x-tree-node .x-tree-node-over {
	background-color: transparent;	
}
.x-item-disabled {
    color: black;
}
.ext-mb-text ul {
    list-style: disc;
    margin: 1em 0px;
    padding: 0px;
}
.about-window {
	p, h3, ul {
    margin: 0.5em 0px;
	}
	em{
		font-style: italic;
	}
	li {
		margin: 0.5em 1.4em;
	}
	ul {
		list-style-type: disc;
	}
	.x-panel-body{
		padding: 0 0.7em 0.7em;
		padding-top: 0;
	}
}

#sm2-container {
    position: relative;
    width: 1px;
    height: 1px;
    _overflow: hidden; 

    object, embed {
        position:absolute;
    }
    &.swf_timedout,&.swf_timedout object,&.swf_timedout embed {
        left:auto;
        top:auto;
        width:48px;
        height:48px;
    }
	&.swf_unblocked {
		width:1px;
		height:1px;
		object, embed {
			left:-9999em;
			top:-9999em;
		}
	}
	&.swf_error {
		display:none;
	}
	&.high_performance {
		position:absolute;
		position:fixed;
		_top:-9999px; 
		_left:-9999px;
		bottom:0px;
		left:0px;
		width:48px;
		height:48px;
		z-index:99; 
		&.swf_unblocked {
			z-index:auto;
			object, embed {
				width:8px;
				height:8px;
				left:auto;
				top:auto;
			}
		}
		&.swf_timedout {
			z-index:99; 
		}
	}
}

.x-panel.subsonic-player {
	background-repeat: repeat-x;
	background-image:  subtunes_image('itunes-background.PNG');	
	.x-panel-body{
	   background-image: none;
	   background-color: transparent;
	}
	.x-box-inner {
		display:table-cell; 
		vertical-align: middle;	
	}
	.x-panel-header {
	   text-align: center;
	   line-height: 13px;
	   font-size: 12px;
	   padding: 3px 3px 2px 5px;
	   	border: 0px solid;
		background-image: none;	
	}
	.control-wrapper {
		margin-left: 30px;
		.controls img {
			margin-top: 4px;
			height: 32px;
			width: 30x;
			vertical-align: middle;	
			background-repeat: no-repeat;
			&.back-button {
				background-image: subtunes_image('back-button-disable.png');
				padding-right: 4px;
				&.enable {
					background-image: subtunes_image('back-button.png');
				}
			}
			&.forward-button {
				background-image: subtunes_image('forward-button-disable.png');
				&.enable {
					background-image: subtunes_image('forward-button.png');
				}
			}
			&.play-button {
				height: 38px;
				width: 37px;
				padding-right: 4px;
				background-image:  subtunes_image('play-button.png');
				&.enable {
					background-image: subtunes_image('pause-button.png');
				}
			}
		}
	}
	.volume {
		margin-top: 12px;
		margin-right: 30px;	
		&.x-slider-horz .x-slider-thumb {
			top: 4px;
			background-image: subtunes_image('slider-thumb-volume.png');
		}
		.volume-max {
			background-image: subtunes_image('volume-full.png');
			height: 13px;
			width: 16px;
			position: absolute;
			right: 12px;
			top: 17px;
		}
		.volume-min {
			background-image: subtunes_image('volume-min.png');
			height: 10px;
			width: 12px;
			position: absolute;
			left: -15px;
			top: 18px;
		}
		&.x-slider-horz, &.x-slider-horz .x-slider-end, &.x-slider-horz .x-slider-inner {
			background-image: subtunes_image('slider-bg-volume.png');
		}
	}
	.viewchooser {
		margin-top: 13px;
		margin-left: 30px;
		.x-btn-tl, .x-btn-tr, .x-btn-ml, .x-btn-mr, .x-btn-bl, .x-btn-br {
			background-repeat: no-repeat;
		}
		.x-btn-tc, .x-btn-mc,   .x-btn-bc {
			background-repeat: repeat-x;
		}
		.x-btn-tl {
			background-position: 0px -23px;
		}
		.x-btn-tr{
			background-position: -23px -23px;
		}
		.x-btn-tc{
			background-position: -3px -23px;
		}
		.x-btn-ml{
			background-position: 0px -27px;
		}
		.x-btn-mr{
			background-position: -23px -27px;
		}
		.x-btn-mc{
			background-position: -3px -27px;
		}
		.x-btn-bl{
			background-position: 0 -43px;
		}
		.x-btn-br{
			background-position: -23px -43px;
		}
		.x-btn-bc{
			background-position: -3px -43px;
		}
		.gridview {
			.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
				background-image: subtunes_image('grid-view-btn-sprite.gif');
			}
		}
		.albumview {
			.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
				background-image: subtunes_image('album-btn-sprite.gif');
			}
		}
		.coverflow {
			.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
				background-image: subtunes_image('coverflow-btn-sprite.gif');
			}
			.x-btn-tr{
				background-position: -24px -23px;
			}
			 .x-btn-mr{
				background-position: -24px -27px;
			}
			.x-btn-br{
				background-position: -24px -43px;
			}
			.x-btn-click {
				.x-btn-tr{
					background-position: -24px -46px;
				}
				.x-btn-mr{
					background-position: -24px -49px;
				}
				.x-btn-br{
					background-position: -24px -43px;
				}
			}
			.x-btn-pressed  {
				.x-btn-tr{
					background-position: -24px 0px;
				}
				.x-btn-mr{
					background-position: -24px -3px;
				}
				.x-btn-br{
					background-position: -24px -20px;
				}
				&.x-btn-click {
					.x-btn-tr{
						background-position: -24px -69px;
					}
					.x-btn-mr{
						background-position: -24px -72px;
					}
					.x-btn-br{
						background-position: -24px -89px;
					}
				}
			}
		}
		.x-btn-click  {
			.x-btn-tl{
				background-position: 0px -46px;
			}
			.x-btn-tr{
				background-position: -23px -46px;
			}
			.x-btn-tc{
				background-position: -3px -46px;
			}
			.x-btn-ml{
				background-position: 0px -49px;
			}
			.x-btn-mr{
				background-position: -23px -49px;
			}
			.x-btn-mc{
				background-position: -3px -49px;
			}
			.x-btn-bl{
				background-position: 0 -43px;
			}
			.x-btn-br{
				background-position: -23px -43px;
			}
			.x-btn-bc{
				background-position: -3px -43px;
			}
		}
		.x-btn-pressed {
			.x-btn-tl{
				background-position: 0px 0px;
			}
			.x-btn-tr{
				background-position: -23px 0px;
			}
			.x-btn-tc{
				background-position: -3px -0px;
			}
			.x-btn-ml{
				background-position: 0px -3px;
			}
			.x-btn-mr{
				background-position: -23px -3px;
			}
			.x-btn-mc{
				background-position: -3px -3px;
			}
			.x-btn-bl{
				background-position: 0 -20px;
			}
			.x-btn-br{
				background-position: -23px -20px;
			}
			.x-btn-bc{
				background-position: -3px -20px;
			}
			&.x-btn-click {
				.x-btn-tl {
					background-position: 0px -69px;
				}
				.x-btn-tr{
					background-position: -23px -69px;
				}
				.x-btn-tc{
					background-position: -3px -69px;
				}
				.x-btn-ml{
					background-position: 0px -72px;
				}
				.x-btn-mr{
					background-position: -23px -72px;
				}
				.x-btn-mc{
					background-position: -3px -72px;
				}
				.x-btn-bl{
					background-position: 0 -89px;
				}
				.x-btn-br{
					background-position: -23px -89px;
				}
				.x-btn-bc{
					background-position: -3px -89px;
				}
			}
		}
	}
	.display-wrapper {
		text-align: center;
		margin: 3px 0px 0px 0px;	
		height: 44px;
		.x-box-ml, .x-box-mc, .x-box-mr {
			height: 34px;
		}
		.x-box-tc, .x-box-mc, .x-box-bc{
			background-repeat: repeat-x;
		}
		.x-box-tl{
			padding-left: 5px;
			background-position: 0px 0px;
		}
		.x-box-tr{
			padding-right: 5px;
			background: transparent none no-repeat scroll right 0;
		}
		.x-box-tc {
			height:5px;
			background-position: 0px -10px;
		}
		.x-box-ml{
			background-position: 0px -20px;
		}
		.x-box-mr{
			background: transparent none repeat-y scroll right -20px;
		}
		.x-box-mc{
			background-position: 0px -54px;
		}
		.x-box-bl{
			padding-left: 5px;
			background-position: 0px -5px;
		}
		.x-box-br{
			padding-right: 5px;
			background: transparent none no-repeat scroll right -5px;
		}
		.x-box-bc{
			height:5px;
			background-position: 0px -15px;
		}
		.x-box-tl, .x-box-tr, .x-box-tc, .x-box-ml, .x-box-mr, .x-box-mc, .x-box-bl, .x-box-br, .x-box-bc {
			background-image: subtunes_image('player-display-bg.png');
		}
		.display {
			color: #5b5a5a;
			img.logo {
				background-image: subtunes_image('subsonic-gray-20x37.png');
				height: 20px;
				width: 37px;
			}
			.title {
				font-weight: bold;
				font-size: 10px;
			}
			.current-track {
				padding-top: 0px;
				margin-top: -7px;
			}
			.artist, .album {
				font-size: 10px;
			}
			.current-position {
				.position {
					margin-top: -6px;
					margin-left: auto;
					margin-right: auto;
					width: 80%;
					.x-slider-horz {
						.x-slider-thumb {
							width:7px;
							height:7px;
							position:absolute;
							left:0;
							top:8px;
							background:transparent no-repeat 0 0;
							background-image: subtunes_image('position-slider-thumb.png');
						}
						.x-slider-thumb-over {
							background-position: 0px 0px;
						}
						 .x-slider-thumb-drag {
							background-position: 0px 0px;
						}
					}
					.x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner {
						background-image: subtunes_image('position-slider-bg.png');
						margin-left: auto;
						margin-right: auto;
					}
				}
				.current-time {
					float: left;
					font-size: 9px;
					margin-top: 7px;
				}
				.remaining-time {
					float: right;	
					font-size: 9px;
					margin-top: -16px;
				}
			}
		}
	}
	.search  {
		margin-left: 10px;	
		margin-top: 9px;
		.x-trigger-wrap-focus .x-form-text {
			background-image: subtunes_image('search-box-focus.png');
		}
		.x-form-text {
			background-image: subtunes_image('search-box.png');
			padding-left: 27px;
			border: 0px none #FFF;
			background-color: transparent;
			width: 145px;
			background-repeat: no-repeat;
			height: 28px;
		}
		.x-search-options-trigger {
			position: absolute;
			left: 3px;
			width: 23px;
			height: 21px;
			top: 4px;
			background-image: none;
			border: 0px none #FFF;
		}
		.x-search-clear-trigger {
			position: absolute;
			right: 29px;
			width: 23px;
			height: 21px;
			top: 7px;
			background-image: subtunes_image('clear-search.png');
			background-repeat: no-repeat;
			background-position: 0 0;
			border: 0px none #FFF;
		}
	}
}

.loading-wrapper {
	position: absolute;
	background-color: #999;
	font: 10px Arial;
	color: #000;
	right: 20px;
	bottom: 20px;
}

div.library-node a span, div.playlist-node a span {
	font-weight: bold;
	text-transform: uppercase;
	color: #627080;
}

div.library-node img, div.playlist-node img.x-tree-node-icon, li.x-tree-node .playlist img.x-tree-ec-icon {
	display: none;	
}

#leftbar {
	background: #D9DEE5;	
	.x-panel-body{
		background-color: transparent;
		.x-tree-node .x-tree-selected {
			background-color: transparent;	
			background-image: subtunes_image('tree-selected-bg.png');
			background-repeat: repeat-x;
			a span {
				color: #FFF;
				font-weight: bold;	
			}
		}
	}
	.x-tree-lines  {
		.x-tree-elbow-end-minus, .x-tree-elbow-minus {
			background-image: subtunes_image('open-arrow.png');
		}
		.x-tree-elbow-end-plus, .x-tree-elbow-plus {
			background-image: subtunes_image('close-arrow.png');
		}
		.x-tree-elbow-line {
			background-image: none;
		}
	}
}


.x-grid3-header td.x-grid3-hd {
	font-weight: bold;
}
.x-grid3-cell-inner, .x-grid3-hd-inner {
	padding: 1px 3px 1px 5px;
}
.x-grid3-row-selected {
	background-color: #4B95E5 !important;
	color: #FFF;
}
.x-grid3-row td, .x-grid3-summary-row td {
	padding-right: 0x;
	border-right: 1px solid #DDD;	
}
.x-grid3-row {
	border-top: 0px solid;
	border-bottom: 0px solid;
}
.x-grid3-row-alt {
	background-color: #F3F7FB;
}
.x-grid3-dirty-cell {
	background-image: none;	
}
.x-tree-node-indent>img.x-tree-elbow-line:first-child {
	background-image: none;
	width: 5px;
}
.x-btn-icon .x-btn-small .x-btn-text {
	width: 20px;	
}
.bottombar {
	background: subtunes_image('southbar-bg.png') transparent;
	.x-panel-body{
		background-color: transparent;
		border: 0px;
	}
	.cfg {
		background-image: subtunes_image('cog.png');
	}
	.x-toolbar.x-statusbar{
		padding: 0 2px;
		background: none transparent;
		.x-toolbar-right {
			width: 100%;
			.x-toolbar-right-ct tbody{
				/*float: left;
				margin-left: 34%;*/
			}
		}
		.x-toolbar-left {
			width: auto;
		}
	}
	.left { 
		background-image: subtunes_image('bottombar-btn-sprite.png');
		margin: 0 10px;
		.x-btn-tl, .x-btn-tc, .x-btn-tr, .x-btn-ml, .x-btn-mc, .x-btn-mr, .x-btn-bl, .x-btn-bc, .x-btn-br {
			background: none transparent !important;
		}
		&.createPlaylist {
			background-position: 0px 1px;
			&.x-btn-click {
				background-position: 0px -21px;
			}
		}
		&.shuffle {
			background-position: -38px 1px;
			&.x-btn-click, &.x-btn-click.x-btn-pressed  {
				background-position: -38px -21px;
			}
			&.x-btn-pressed {
				background-position: -38px -65px;
			}
		}
		&.repeat {
			background-position: -77px 1px;
			&.x-btn-click.off, &.x-btn-click.all  {
				background-position: -77px -21px;
			}
			&.x-btn-click.one  {
				background-position: -77px -43px;
			}
			&.all {
				background-position: -77px -65px;
			}
			&.one {
				background-position: -77px -87px;
			}
		}
	}
}
.x-layout-split {
	width: 1px;
}